import React, { forwardRef, useState, useImperativeHandle, ChangeEvent } from 'react';
import { Button, Modal, Input, Table, Space, Form, Checkbox, Upload, Divider, Collapse } from 'antd';
import { UploadOutlined, PaperClipOutlined, CheckOutlined, CaretRightOutlined } from '@ant-design/icons';
import { Tabs, UploadProps } from 'antd';
import * as XLSX from "xlsx";
import { defaultProjectSubTableList, getChangeEventValue, getCheckBoxChangeEventValue, handleDownloadByName, handleDownloadByNameV2, protectlandProblemTableData, provinceList, replaceUnitUpperCase, toastShort } from '../../../utils';
import { ProtectedNaturalEnvironmentType, ProtectlandBaseInfoType, ProtectlandExtraInfoType, SupplementaryInformationType } from '../../../utils/types';
import type { ColumnsType } from 'antd/es/table';
import { ProtectlandProblem, TypeProjectSubTable } from '../../../types';
import {
    subTableWorkSheet1Template,
    subTableWorkSheet1Template1,
    subTableWorkSheet2Template,
    subTableWorkSheet2Template1,
    subTableWorkSheet3Template,
    subTableWorkSheet4Template,
    subTableWorkSheet5Template,
    subTableWorkSheet6Template,
} from "./../../office-lib/word-editor-plugins/WorkSheetTemplate";
import { FileWord } from '@icon-park/react';
import systemApi from '../../../api/system';
import { saasConfig } from '../../../config/theme-config';

interface Props {
    onFinish?: Function
    isEdit?: boolean
};



const ProtectlandDetailsModal = (props: Props, ref: any) => {
    useImperativeHandle(ref, () => ({
        openModal: openModal
    }));

    const {
        onFinish,
        isEdit = false,
    } = props;

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [form] = Form.useForm<ProtectlandBaseInfoType>();
    const [formData, setFormData] = useState<ProtectlandBaseInfoType>({});

    const [submitLoading, setSubmitLoading] = useState(false);
    const [currentRowData, setCurrentRowData] = useState<ProtectlandBaseInfoType>({});

    const [projectSubTableList, setProjectSubTableList] = useState<TypeProjectSubTable[]>(defaultProjectSubTableList);

    const [supplementaryInformation, setSupplementaryInformation] = useState<SupplementaryInformationType>({
        geographicalLocationText: "",
        rangeText: "",
        historicalEvolutionText: "",
        legalStatusText: "",
        mainProtectionObjecText: "",
        administrativeDivisionText: "",
        landOwnershipText: "",
        geologyAndGeomorphologyText: "",
        climateText: "",
        hydrologyText: "",
        soilText: "",
        vegetationText: "",
        fungusText: "",
        landscapeResourcesText: "",
        naturalDisasterText: "",
    })

    const [protectedNaturalEnvironment, setProtectedNaturalEnvironment] = useState<ProtectedNaturalEnvironmentType>({
        geographicalLocationText: "",
        climateText: ""
    })

    const [isExpanded, setIsExpanded] = useState(false);

    const [fileName, setFileName] = useState('');

    const openModal = (projectExtraInfo: ProtectlandExtraInfoType) => {
        // if (!isEmpty(problemKeys)) {
        //     const problemKeyList = problemKeys.split(',');
        //     let _tempData = data;
        //     _tempData.forEach(problem => {
        //         if (problemKeyList.includes(problem.value)) {
        //             problem.checked = true;
        //         } else {
        //             problem.checked = false;
        //         }
        //     })
        //     console.log("_tempData---->", _tempData)
        //     setData([..._tempData]);
        // }
        setIsModalOpen(true);
        if (projectExtraInfo) {
            const {
                projectSubTableList,
                supplementaryInformation,
                protectedNaturalEnvironment
            } = projectExtraInfo;
            setProjectSubTableList(projectSubTableList);
            setSupplementaryInformation(supplementaryInformation);
            setProtectedNaturalEnvironment(protectedNaturalEnvironment);
        } else {
            setProjectSubTableList(defaultProjectSubTableList);
            setSupplementaryInformation({
                geographicalLocationText: "",
                rangeText: "",
                historicalEvolutionText: "",
                legalStatusText: "",
                mainProtectionObjecText: "",
                administrativeDivisionText: "",
                landOwnershipText: "",
                geologyAndGeomorphologyText: "",
                climateText: "",
                hydrologyText: "",
                soilText: "",
                vegetationText: "",
                fungusText: "",
                landscapeResourcesText: "",
                naturalDisasterText: "",
            });
            setProtectedNaturalEnvironment({
                geographicalLocationText: "",
                climateText: ""
            });
        }
    };

    const handleConfirm = async () => {
        try {
            let projectExtraInfo: ProtectlandExtraInfoType = {
                projectSubTableList: projectSubTableList,
                supplementaryInformation: supplementaryInformation,
                protectedNaturalEnvironment: protectedNaturalEnvironment,
            }
            console.log("projectExtraInfo--->", projectExtraInfo)
            // let checkedProblemValueList = data.map(problem => {
            //     if (problem.checked) {
            //         return problem.value;
            //     }
            // })
            // checkedProblemValueList = checkedProblemValueList.filter(value => {
            //     return !isEmpty(value)
            // })
            setIsModalOpen(false);
            onFinish && onFinish(projectExtraInfo)
        } catch (errorInfo) {
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const columns: ColumnsType<ProtectlandProblem> = [
        {
            title: '问题相关分类',
            dataIndex: 'problemType',
            width: 176,
            onCell: (_, index) => {
                if (index == 0) {
                    return { rowSpan: 8 };
                }
                if (index == 9) {
                    return { rowSpan: 5 };
                }
                if (index == 15) {
                    return { rowSpan: 2 };
                }
                if (
                    (index > 0 && index < 8) ||
                    (index > 9 && index < 14) ||
                    (index > 15 && index < 17)
                ) {
                    return { colSpan: 0 };
                }
            },
        },
        {
            title: '具体问题',
            dataIndex: 'problemDetails',
            width: 432,
        },
        {
            title: '选择',
            dataIndex: 'tel',
            width: 120,
            align: 'center',
            render: (value: any, record: ProtectlandProblem, index: number) => (
                <Checkbox
                    disabled={isEdit}
                    checked={record.checked}
                    onChange={(e) => onProblemCheckedChange(record, e)}
                />
            )
        }
    ];

    const onProblemCheckedChange = (problem: ProtectlandProblem, e: any) => {
        console.log("onProblemCheckedChange---->", problem, e)
        let _tempData = data;
        const findProblem = _tempData.find(ele => {
            return ele.key == problem.key;
        })
        if (findProblem) {
            findProblem.checked = getCheckBoxChangeEventValue(e);
        }
        setData([..._tempData]);
    };

    const [data, setData] = useState<ProtectlandProblem[]>([...protectlandProblemTableData]);

    const renderProblemTable = () => {
        return (
            <div style={{ height: 756 }}>
                <Table
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                    size={'small'}
                    bordered
                />
            </div>
        )
    };

    const handleDownLoadTemplate = (info: TypeProjectSubTable) => {
        handleDownloadByNameV2(info.url, info.fileName)
    }

    const uploadProps: UploadProps = {
        name: 'file',
        multiple: false,
        showUploadList: false
    };

    const beforeUpload = (file: any, projectSubTable: TypeProjectSubTable) => {
        console.log("beforeUpload--->", file, projectSubTable)
        let reader = new FileReader()
        reader.readAsBinaryString(file)//读取这个文件
        reader.onload = function (event) {
            try {
                let result = event.target.result
                let xlsxdata = XLSX.read(result, { type: 'binary' })//读取xlsx
                console.log("xlsxdata.Sheets--->", xlsxdata.Sheets)
                const workSheetNameList: string[] = xlsxdata.SheetNames;
                if (workSheetNameList.length == 0) {
                    return toastShort('error', `${projectSubTable.name}无数据，请检查上传文件！`)
                }
                const workSheet: string[][] = XLSX.utils.sheet_to_json(xlsxdata.Sheets[workSheetNameList[0]], { header: 1, defval: '', blankrows: true });
                let processedWorkSheet = processWorkSheet(workSheet, projectSubTable.type);
                if (processedWorkSheet.length == 0) {
                    return toastShort("error", `${projectSubTable.name}无法匹配`)
                }
                console.log("projectSubTable--->", projectSubTable)
                let tempFileName = file.name;
                let _projectSubTableList = projectSubTableList;
                _projectSubTableList[Number(projectSubTable.type) - 1].workSheetFileName = tempFileName;
                //
                if (projectSubTable.type == '6') {
                    console.log("执行---->")
                    const speciesNameList = [];
                    processedWorkSheet.forEach(rowList => {
                        speciesNameList.push(rowList[0])
                    })
                    systemApi.querySpeciesInfoMutiple({
                        names: speciesNameList,
                        range: 'all'
                    })
                        .then(res => {
                            if (res.data.list) {
                                processedWorkSheet = [...res.data.list];
                                _projectSubTableList[Number(projectSubTable.type) - 1].workSheetData = processedWorkSheet;
                            }
                        })
                        .catch(err => {
                            console.log("err--->", err)
                        })
                }else {
                    _projectSubTableList[Number(projectSubTable.type) - 1].workSheetData = processedWorkSheet;
                }
                setProjectSubTableList([..._projectSubTableList]);
            } catch (e) {
                console.log("e", e)
            }
        }
        return false;
    }

    const presetWorkSheet = (originWorkSheet: string[][]) => {
        let newWorkSheet: string[][] = [];
        originWorkSheet.forEach(rowList => {
            let newRowList = [];
            rowList.forEach(cellValue => {
                const replacedCellValue = replaceUnitUpperCase(cellValue);
                newRowList.push(replacedCellValue)
            })
            newWorkSheet.push(newRowList)
        })
        return newWorkSheet;
    }

    const processWorkSheet = (workSheet: string[][], currentSubTableType: string): any[][] => {
        let newWorkSheet = presetWorkSheet(workSheet);
        console.log("处理好的workSheet---->", newWorkSheet)
        switch (currentSubTableType) {
            case '1':
                if (
                    JSON.stringify(newWorkSheet.slice(0, 2)) !== JSON.stringify(subTableWorkSheet1Template) &&
                    JSON.stringify(newWorkSheet.slice(0, 2)) !== JSON.stringify(subTableWorkSheet1Template1)
                ) {
                    return [];
                }
                break;
            case '2':
                if (JSON.stringify(newWorkSheet.slice(0, 2)) !== JSON.stringify(subTableWorkSheet2Template1)) {
                    return [];
                }
                break;
            case '3':
                if (JSON.stringify(newWorkSheet.slice(0, 1)) !== JSON.stringify(subTableWorkSheet3Template)) {
                    return [];
                }
                break;
            case '4':
                if (JSON.stringify(newWorkSheet.slice(0, 2)) !== JSON.stringify(subTableWorkSheet4Template)) {
                    return [];
                }
                break;
            case '5':
                if (JSON.stringify(newWorkSheet.slice(0, 1)) !== JSON.stringify(subTableWorkSheet5Template)) {
                    return [];
                }
                break;
            case '6':
                if (JSON.stringify(newWorkSheet.slice(0, 1)) !== JSON.stringify(subTableWorkSheet6Template)) {
                    return []
                }
                break;
            default:
                break;
        }
        return newWorkSheet;
    }

    const renderProjectSubTable = () => {
        return (
            <div style={{ height: 756 }}>
                {
                    projectSubTableList.map((ele, index) => [
                        <div style={{ marginBottom: '18px' }} key={index + ''}>
                            <Upload
                                {...uploadProps}
                                beforeUpload={(file) => beforeUpload(file, ele)}
                            >
                                <Button
                                    type={ele.workSheetFileName ? 'primary' : 'default'}
                                    icon={ele.workSheetFileName ? <CheckOutlined /> : <UploadOutlined />}
                                >
                                    {
                                        ele.workSheetFileName ? ele.workSheetFileName : `上传${ele.name}`
                                    }
                                </Button>
                            </Upload>
                            <div
                                className="single-line-text link-text"
                                style={{ width: 320 }}
                                onClick={() => handleDownLoadTemplate(ele)}
                                title={ele.fileName}
                            >
                                <PaperClipOutlined />
                                {ele.fileName}
                            </div>
                        </div>
                    ])

                }
            </div>
        )
    }

    const {
        TextArea
    } = Input;

    const onSupplementaryInformationTextChange = (e: ChangeEvent<HTMLTextAreaElement>, type: string) => {
        let _supplementaryInformation = supplementaryInformation;
        _supplementaryInformation[type] = replaceUnitUpperCase(getChangeEventValue(e));
        setSupplementaryInformation({ ..._supplementaryInformation })
    }

    const onProtectedNaturalEnvironmentTextChange = (e: ChangeEvent<HTMLTextAreaElement>, type: string) => {
        let _protectedNaturalEnvironment = protectedNaturalEnvironment;
        _protectedNaturalEnvironment[type] = replaceUnitUpperCase(getChangeEventValue(e));
        setProtectedNaturalEnvironment({ ..._protectedNaturalEnvironment })
    }

    const { Dragger } = Upload;

    const onFileChange = (e) => {
        console.log("onFileChange--->", e)

        try {
            const fileName = e.file.name.split('.')[0];
            if (e.fileList.length == 0) {
            } else {
                if (e.event && e.event.percent) {
                    console.log("e.event.percent-->", e.event.percent)
                    // setUploadProgress(e.event.percent);
                } else if (e.file && e.file.response) {
                    const {
                        file: {
                            response: {
                                data
                            }
                        }
                    } = e;
                    toastShort('success', '解析成功！')
                    let _supplementaryInformation = supplementaryInformation;
                    //@ts-ignore
                    Object.keys(data.baseInfo).forEach((key) => {
                        //@ts-ignore
                        _supplementaryInformation[key] = replaceUnitUpperCase(data.baseInfo[key]);
                    })
                    setSupplementaryInformation({ ..._supplementaryInformation })
                }
                // const {
                //     administrativeDivisionText,
                //     climateText,
                //     fungusText,
                //     geographicalLocationText,
                //     geologyAndGeomorphologyText,
                //     historicalEvolutionText,
                //     hydrologyText,
                //     landOwnershipText,
                //     landscapeResourcesText,
                //     legalStatusText,
                //     mainProtectionObjecText,
                //     naturalDisasterText,
                //     rangeText,
                //     soilText,
                //     vegetationText
                // } = data.baseInfo;

            }
        } catch (e) {
            console.log("出错了--->", e)
        }
    };

    const beforeUploadWordFile = (file: any) => {
        if (file.size > 1 * 1024 * 1024) {
            toastShort('error', '上传文件不得大于1M')
            return false;
        }
    }

    const handleDownloadWordTemplate = () => {
        const downloadUrl = 'https://ghzsapi.zhbhd.cn/assets/uploads/2024-04-09/5fe6c034-5025-464a-8e08-cc6deb51f538c6361d56-d5ea-4d4f-9166-59dad945dd51基本信息采集界面-补充信息上传模板.docx';
        // handleDownloadByName('http://220.163.43.218:9001/ghzs_api/assets/uploads/2024-01-31/c6361d56-d5ea-4d4f-9166-59dad945dd51基本信息采集界面-补充信息上传模板.docx', '保护地基本概况上传模板')
        handleDownloadByNameV2(downloadUrl, '保护地基本概况上传模板')
    }

    
    const uploadActionUrl = `${saasConfig.nodeJsApiBaseUrl}/export-api/tools-service/word-template-base-info-upload`;

    const renderSupplementaryInformation = () => {
        return (
            <div style={{ height: 756 }}>
                <div className='extra-info-upload-box'>
                    <Dragger
                        {...uploadProps}
                        style={{ width: '720px' }}
                        onChange={onFileChange}
                        maxCount={1}
                        beforeUpload={beforeUploadWordFile}
                        action={uploadActionUrl}
                        accept=".word,.docx"
                    >
                        <p
                            className="ant-upload-drag-icon"
                            style={{ marginTop: 32 }}
                        >
                            <FileWord theme="outline" size="48" fill="#333" strokeWidth={3} />
                        </p>
                        <p className="ant-upload-text">
                            {fileName || '点击上传或拖入保护地基本概括文档'}
                        </p>
                    </Dragger>
                    <div
                        className="single-line-text link-text"
                        style={{ width: 320 }}
                        onClick={() => handleDownloadWordTemplate()}
                    >
                        <PaperClipOutlined />
                        保护地基本概况上传模板.docx
                    </div>
                </div>
                {/* <Divider></Divider> */}
                <div className='flex-row word-take-result-expanded-button' onClick={() => setIsExpanded(!isExpanded)}>
                    基本概况提取结果<CaretRightOutlined rotate={isExpanded ? 90 : 0} />
                </div>
                <div style={{ height: isExpanded ? 'auto' : 0, overflow: 'hidden' }} className='word-take-result-expanded-list'>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>地理位置</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.geographicalLocationText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'geographicalLocationText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>范围</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.rangeText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'rangeText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>历史沿革</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.historicalEvolutionText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'historicalEvolutionText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>法律地位</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.legalStatusText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'legalStatusText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>主要保护对象</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.mainProtectionObjecText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'mainProtectionObjecText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>行政区域</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.administrativeDivisionText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'administrativeDivisionText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>土地权属</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.landOwnershipText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'landOwnershipText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>地质地貌</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.geologyAndGeomorphologyText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'geologyAndGeomorphologyText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>气候</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.climateText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'climateText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>水文</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.hydrologyText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'hydrologyText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>土壤</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.soilText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'soilText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>植被</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.vegetationText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'vegetationText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>真菌</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.fungusText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'fungusText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                        <div className='extra-info-item-row-gap'></div>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>景观资源</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.landscapeResourcesText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'landscapeResourcesText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                    <div className='flex-row extra-info-item-row'>
                        <div className='extra-info-item'>
                            <div className='extra-info-item-title'>自然灾害</div>
                            <TextArea
                                className='extra-info-item-textarea'
                                value={supplementaryInformation.naturalDisasterText}
                                onChange={(e) => onSupplementaryInformationTextChange(e, 'naturalDisasterText')}
                                maxLength={2000}
                                showCount
                            />
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    const renderProtectedNaturalEnvironment = () => {
        return (
            <div style={{ height: 756 }}>
                <div className='extra-info-item'>
                    <div className='extra-info-item-title'>景观资源</div>
                    <TextArea
                        className='extra-info-item-textarea'
                        value={protectedNaturalEnvironment.geographicalLocationText}
                        onChange={(e) => onProtectedNaturalEnvironmentTextChange(e, 'geographicalLocationText')}
                        maxLength={2000}
                        showCount
                    />
                </div>
                <div className='extra-info-item'>
                    <div className='extra-info-item-title'>自然灾害</div>
                    <TextArea
                        className='extra-info-item-textarea'
                        value={protectedNaturalEnvironment.climateText}
                        onChange={(e) => onProtectedNaturalEnvironmentTextChange(e, 'climateText')}
                        maxLength={2000}
                        showCount
                    />
                </div>
            </div>
        )
    }

    return (
        <Modal
            title={'保护地详细信息'}
            open={isModalOpen}
            onOk={handleConfirm}
            onCancel={handleCancel}
            okText={'确 认'}
            cancelText={'取 消'}
            width={976}
            maskClosable={false}
            confirmLoading={submitLoading}
            centered
        >
            <div className='custom-modal-container'>
                <Tabs
                    defaultActiveKey="2"
                    tabPosition={'left'}
                    style={{ marginLeft: -20 }}
                    className='protectland-details-tabs'
                    items={[
                        // {
                        //     label: `保护地存在问题`,
                        //     key: '1',
                        //     children: renderProblemTable()
                        // }
                        {
                            label: `基本概况`,
                            key: '2',
                            children: renderSupplementaryInformation()
                        },
                        {
                            label: `规划附表`,
                            key: '1',
                            children: renderProjectSubTable()
                        },

                    ]}
                />
            </div>
        </Modal >
    )
}


export default forwardRef(ProtectlandDetailsModal);